<template>
  <div class="content" v-if="orderDetails.id">
    <!-- Navbar -->
    <navBar title="问诊详情"></navBar>
    <!-- 头部医生信息 -->
    <div class="head">
      <div class="bgc">
        <div class="info">
          <div class="left">
            <h4 class="price">图文问诊 {{orderDetails.payment}} 元</h4>
            <p class="title">服务医生信息</p>
          </div>
          <div
            class="right"
            :style="{
              color: colors[orderDetails.statusValue] || '#848484'
            }"
          >
            {{ orderDetails.statusValue }}
          </div>
        </div>
        <!-- 服务医生信息 -->
        <div class="doctor">
          <div class="left">
            <van-image
              round
              width="1rem"
              height="1rem"
              fit="cover"
              :src="
                orderDetails.docInfo
                  ? orderDetails.docInfo.avatar
                  : '@/assets/upload/doctor-portrait@2x.png'
              "
            />
            <div class="allocation">
              <div class="caption">极速问诊</div>
              <p class="name">
                {{
                  orderDetails.docInfo
                    ? orderDetails.docInfo.name
                    : "暂未分配医生"
                }}
              </p>
            </div>
          </div>
          <van-icon name="arrow" color="#c3c3c5" />
        </div>
      </div>
    </div>
    <!-- 患者信息 -->
    <div class="main">
      <van-cell-group class="patientInfo">
        <van-cell
          title="患者信息"
          :value="`${orderDetails.patientInfo.name} | ${orderDetails.patientInfo.genderValue} | ${orderDetails.patientInfo.age}岁`"
        />
        <van-cell
          title="患病时长"
          :value="illnessTime[orderDetails.illnessTime]"
        />
        <van-cell
          title="就诊情况"
          :value="orderDetails.consultFlag ? '就诊过' : '未就诊'"
        />
        <van-cell title="病情描述" :label="orderDetails.illnessDesc" />
      </van-cell-group>
      <!-- 订单信息 -->
      <div class="orderInfo">订单信息</div>
      <van-cell-group class="infoCell">
        <van-cell title="订单编号">
          <template #value>
            <div class="number">
              <van-button
                class="copy"
                round
                plain
                type="success"
                :data-clipboard-text="orderDetails.orderNo"
                @click="copy"
                >复制</van-button
              >
              <span class="num">{{ orderDetails.orderNo }}</span>
            </div>
          </template>
        </van-cell>
        <van-cell title="创建时间" :value="orderDetails.createTime" />
        <van-cell title="应付款" :value="`￥${orderDetails.payment}`" />
        <van-cell
          title="优惠券"
          :value="`-￥${orderDetails.couponDeduction}`"
        />
        <van-cell
          title="积分抵扣"
          :value="`-￥${orderDetails.pointDeduction}`"
        />
        <van-cell
          title="实付款"
          :value="`￥${orderDetails.actualPayment}`"
          class="payment"
        />
      </van-cell-group>
    </div>
    <!-- 底部按钮 -->
    <van-sticky position="bottom">
      <div class="footer" v-if="orderDetails.status === 1">
        <PendDetailButton :orderDetails="orderDetails" @cancelOrder="onCancelOrder(order.id)" @fetchOrderDetails="fetchOrderDetails"></PendDetailButton>
      </div>
      <div class="footer" v-else-if="orderDetails.status === 2">
        <PenDing @cancelOrder="onCancelOrder(order.id)" :order="orderDetails"></PenDing>
      </div>
      <div class="footer" v-else-if="orderDetails.status === 3">
        <PenDing @cancelOrder="onCancelOrder(order.id)" :order="orderDetails"></PenDing>
      </div>
      <div class="footer" v-else-if="orderDetails.status === 4">
        <Accomplish :order="order" @onDelOrder="onDelOrder">
          <van-button class="out examine" round plain type="success"
            >查看评价</van-button
          >
        </Accomplish>
      </div>
      <div class="footer" v-else>
        <CancelButton @delOrder="onDelOrder(order.id)"></CancelButton>
      </div>
    </van-sticky>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Clipboard from 'clipboard'
import { showToast, showFailToast, showSuccessToast } from 'vant'
import { delOrder, cancelOrder, getOrderDetails } from '@/api'
import Accomplish from './components/accomPlish.vue'
import PenDing from './components/penDing.vue'
import CancelButton from './components/cancelButton.vue'
import PendDetailButton from './components/pendDetailButton.vue'

const route = useRoute()
const router = useRouter()
// 当前订单
const order = ref(route.query)

// 获取订单详情
const orderDetails = ref({})
const fetchOrderDetails = async () => {
  const { data } = await getOrderDetails(order.value.id)
  orderDetails.value = data
}
fetchOrderDetails()

// 顶部右侧文字颜色
const colors = {
  待支付: '#f2994a',
  咨询中: '#16c2a3'
}

// 患病时长数据
const illnessTime = {
  1: '一周内',
  2: '一月内',
  3: '半年内',
  4: '半年以上'
}

// 复制文本
const copy = () => {
  const clipboard = new Clipboard('.copy')
  clipboard.on('success', (e) => {
    showToast('已复制')
    // 释放内存
    clipboard.destroy()
  })
  clipboard.on('error', (e) => {
    // 不支持复制
    showFailToast('该浏览器不支持自动复制')
    // 释放内存
    clipboard.destroy()
  })
}

// 删除订单
const onDelOrder = async (id) => {
  await delOrder(id)
  showSuccessToast('删除成功')
  router.push('/consult')
}

// 取消订单
const onCancelOrder = async (id) => {
  await cancelOrder(id)
  showSuccessToast('取消成功')
  fetchOrderDetails()
}
</script>

<style lang="scss" scoped>
// 头部医生信息
.head {
  position: relative;
  margin-top: 80px;
  padding-bottom: 46px;
  background-color: #fcfcfc;
  .bgc {
    padding: 60px 30px 0;
    height: 290px;
    background: linear-gradient(0deg, #dbf0ed, #fff);
    border-bottom-left-radius: 70% 26%;
    border-bottom-right-radius: 70% 26%;
    .info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .left {
        .price {
          margin-bottom: 10px;
          font-size: 32px;
        }
        .title {
          font-size: 28px;
          color: #6f6f6f;
        }
      }
      .right {
        font-size: 32px;
        color: #848484;
      }
    }
    .doctor {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 0 4px 1px #eee;
      background-color: #fff;
      .left {
        display: flex;
        align-items: center;
        .allocation {
          margin-left: 24px;
          .caption {
            font-size: 32px;
          }
          .name {
            font-size: 26px;
            color: #6f6f6f;
          }
        }
      }
    }
  }
}

// 患者信息
.main {
  .patientInfo {
    margin-bottom: 26px;
  }

  // 订单信息
  .orderInfo {
    padding: 30px;
    background-color: #fff;
    font-size: 32px;
  }
  .infoCell{
    padding-bottom: 156px;
  }
  .payment {
    ::v-deep .van-cell__value {
      font-size: 32px;
      color: #eb5757;
    }
  }
  ::v-deep .van-cell__title {
    flex: unset;
  }
  .number {
    display: flex;
    justify-content: end;
    align-items: center;
    .copy {
      padding: 0 20px;
      margin-right: 26px;
      border: 1px solid #16c2a3;
      background-color: #eaf8f6;
      height: 40px;
      font-size: 24px;
      color: #16c2a3;
    }
  }
}

// 底部按钮
::v-deep .footer {
  position: relative;
  display: flex;
  justify-content: end;
  padding: 24px 30px;
  border-top: 1px solid #eee;
  background-color: #fff;
  .van-button--round {
    height: 88px;
    font-size: 32px;
  }
  .out {
    border: 0;
    background-color: #f6f7f9;
    color: #6f6f6f;
  }
  .next {
    margin-left: 20px;
    border: 1px solid #16c2a3;
    background-color: #16c2a3;
    color: #fff;
  }
  .examine {
    margin-left: 20px;
  }
  .van-popover__wrapper {
    position: absolute;
    top: calc(50% - 16px);
    left: 30px;
    font-size: 28px;
    color: #848484;
  }
}
</style>
